<template>
    <h1>{{ msg }}</h1>
    <p>{{ count.num }}</p>
    <button @click="changeMsg">Change Msg</button>
    <button @click="changeCount">Change Count</button>
</template>
<script>
//请使用选项式api语法，将msg定义为响应式数据
export default {
    data() {
        return {
            msg: 'Hello Vue 3.01',
            //创建响应式对象
            count: {
                num: 100
            }
        }
    },
    methods: {
        changeMsg() {
            this.msg = 'Welcome to Vue 3.0'
        },
        changeCount() {
            this.count.num += 100
        }

    }
}
</script>
<style scoped>

</style>